Homebrew で作るモダンなフロントエンド開発環境 (Git + zsh + apache + MySQL + Ruby)

一つ前のエントリーで新規 Mac にインストールしておきたいアプリのまとめを紹介しました。フロントエンド開発をしていくにあたり、アプリをインストールするだけでなく必要に応じて様々な動作環境を構築する必要がある訳ですが、これもまた何かと手間のかかる面倒な作業だったりします。都度ググっては参考になりそうな情報に倣って試みるも、その情報が古かったり構築するための前提条件が微妙に異なったりと、そっくりそのまま参考にすることが難しいことがほとんどだったりします。

現状、僕は Mac の開発環境の構築に Homebrew というパッケージ管理ツールを利用しています。海外と比較して日本での利用者が多いことから日本語の情報が多く出回っていることが主な理由です。

Homebrew（ホームブルー）は、Mac OS Xオペレーティングシステム上でソフトウェアの導入を単純化するパッケージ管理システムのひとつである。Homebrewは、その他のフリー/オープンソースソフトウェアの導入を単純化するためのフリー/オープンソースソフトウェアプロジェクトである。MacPortsやFinkと同様の目的と機能を備えている。HomebrewはMac Howellによって書かれ、Ruby on Railsコミュニティーで人気を得てきており、その拡張性を評価されている。

Homebrew（パッケージ管理システム） - Wikipedia

そんな訳で、Homebrew で作るフロントエンド用開発環境の構築手順をここにまとめました。フロントエンド用と謳っておきながら、Ruby とか MySQL も含まれていたりしますが、Web アプリを作る以上はローカルマシンにそれらを動作させる環境がなければ何も始まりません。静的な HTML ページだけ作って、それらの必要以上に冗長なソースコードをサーバーサイドエンジニアに丸投げするなんてことが許される時代は、とうの昔に終わっています。

何？そんなの MAMP とかインストールすれば一発じゃないか・・・だって？

甘えを捨てろ。
お前らの甘え･･････その最もたるは、
今、口々にがなりたてたその質問だ。
(｀・ω・´)

ざわ・・　ざわ・・

前提条件

本稿の構築手順を実施するにあたって、予め以下の条件を全て満たしている必要があります。

• Mac OS X Mountain Lion
• 不可視設定ファイル/フォルダが表示されるように設定されていること ^*1
• Java 7 がインストールされていること
• XCode Command Line Tools が予めインストールされていること ^*2

Homebrew をインストール

参考サイト

• Homebrew — MacPorts driving you to drink? Try Homebrew!
• Mountain LionにHomebrewをインストールする | karakaram-blog

ターミナルを起動します。そのまま以下のコマンドを入力して Enter

$ ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go)"

インストール途中で Press ENTER to continue or any other key to abort と訊かれても、まよわず Enter 。To proceed, enter your password と訊かれたら、現在そのマシンにログインしているユーザーのパスワードを入力してEnter。これでインストールはできました。

（※暫定的に）Homebrew の PATH を通しておく

~/ディレクトリに.bash_profileというファイルがあるはずです ^*3。もし無かったらテキストエディタで新規に作成し、以下のコードを記述します。

export PATH=/usr/local/bin:$PATH

記述して保存したらターミナル上で以下のコマンドを実行して無事にインストールされたか確認します。このようにバージョン情報が表示されればインストール成功。

$ brew -v
brew -v Homebrew 0.9.4

Homebrew の動作確認

インストール完了時に You should run `brew doctor’ *before* you install anything. といったメッセージが表示されませんでしたか？以下のコマンドで Homebrew の現在の状態をチェックすることができます。

$ brew doctor

Homebrew の動作環境に不備がないか診断が始まります。もし何か見つかればその内容と具体的な対処方法が表示されるので、その通りにしておけば大丈夫です。大概は表示された対処コマンドをその場で実行すれば治ることがほとんどだと思います。今回のマシンセットアップ時にもいくつか症状が検出されましたが、提示された対処コマンドを実行するだけで全て治りました。

Homebrew 自体を更新しておく

Homebrew で管理されているパッケージは次々とバージョンが上がっています。そのため、Homebrew 自体をインストール時から放っておくと、古いバージョンのパッケージをインストールされかねません。何かをインストールする際には事前に Homebrew 自体を最新版に更新しておく癖をつけておくのが良いです。

$brew update

zsh をインストール

参考サイト

• zshの設定ファイルの読み込み順番のメモ - masasuzu 技術メモ

Mac OS には標準で zsh が用意されていますが、あえてこれを使わずに Homebrew 経由でインストールしたモノを使うようにします。理由は以下のとおり。

• Mac 標準のはバージョンが古すぎる
• これを最新版にアップグレードしても、Mac OS をアップグレードすると古いバージョンに戻されてしまう恐れがある
• ターミナルから Mac 標準の zsh を起動すると、読み込まれる設定ファイルに制限が加わってしまう

とまぁ、Mac 標準のモノは何かと難ありなのです。どうせなら設定ファイルもきちんと整理しておきたいので、Homebrew からインストールしたのを使いたいところです。こちらならログインシェルで zsh を起動することができるので、何かと都合が良いのです（たぶん恐らく）。

では早速インストールするとします。ターミナルを起動して以下のコマンドを実行します。

$ brew install zsh

少し時間がかかりますが、そのまま待っていればじきに終わります。ところが以下のようなメッセージが返ってきました。

If you have administrator privileges, you must fix an Apple miss

configuration in Mac OS X 10.7 Lion by renaming /etc/zshenv to
/etc/zprofile, or Zsh will have the wrong PATH when executed
non-interactively by scripts.

Alternatively, install Zsh with /etc disabled:
  brew install --disable-etcdir zsh

簡単に要約すると、Mac の zsh は起動時に PATH をリセットしてしまう仕様があるため、これの対処方法として以下の二種類のうちどちらかを実行するように、と指示されています。

1. /etc/zshenv を/etc/zprofile にリネームする
2. brew install --disable-etcdir zsh と実行して/etc 無効版をインストールする

僕は１の方法にしました。普通に Finder 上でリネームします。

しかしインストールしただけではまだログインシェルとして使うことが出来ません。まずは　zsh という名のシェルのパスをターミナルに認識させます。/etc/shells というファイルを開いて、いちばんうしろに以下のように追記します。

# Ftpd will not allow users to connect who are not using 
# one of these shells. 
/bin/bash 
/bin/csh 
/bin/ksh 
/bin/sh 
/bin/tcsh 
/bin/zsh 
/usr/local/bin/zsh

追記した内容は、今さっき Homebrew からインストールした zsh のパスです。これでターミナルが新しい zsh を認識するようになります。最後にターミナル起動時こいつが使用されるようにデフォルトシェルに設定します。ターミナル上で以下のコマンドを実行します。

$ chpass -s /usr/local/bin/zsh

ターミナルを再起動します。ウィンドウのヘッダー部分にzshと書かれていれば成功。

sbin の作成と ＄PATH の設定

先ほどの Homebrew のインストールは zsh ではなく bash というシェルで行ったので、.bash_profileというbash専用の設定ファイルにパスが設定されていました。今回シェルを zsh に変更したので、homebrew のパスをこちらにも設定する必要があります。

まず/usr/local/sbin というフォルダを作成します。恐らく既にできていると思いますが、万が一無かったら新規で作成してください。次に/etc/pathsというファイルをテキストエディタで開いて、パスの設定をします。開くとこのようになっているかと思います。

/usr/bin
/bin
/usr/sbin
/sbin
/usr/local/bin

パスというのはここに記述されているものを上から順番に探していき、見つかった時点でその場所にあるモノが実行されます。今回実行して欲しいのは一番下にあるものなので、コレを一行目に移動し、ついでに/usr/local/sbinを以下のように追記します。

/usr/local/bin
/usr/bin
/bin
/usr/local/sbin
/usr/sbin
/sbin

追記して保存したら、ターミナルを再起動して以下のコマンドを実行します。

$ env

PATH=/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/sbin:/sbin
TMPDIR=/var/folders/76/czhrnqw145gc887_9r3pz32w0000gn/T/
SHELL=/usr/local/bin/zsh
HOME=/Users/yamadanaoki
USER=yamadanaoki
LOGNAME=yamadanaoki
SSH_AUTH_SOCK=/tmp/launch-2JfjJD/Listeners
Apple_Ubiquity_Message=/tmp/launch-HERuvE/Apple_Ubiquity_Message
Apple_PubSub_Socket_Render=/tmp/launch-f1sLls/Render
COMMAND_MODE=unix2003
__CF_USER_TEXT_ENCODING=0x1F5:1:14
TERM_PROGRAM=iTerm.app
COLORFGBG=7;0
LANG=ja_JP.UTF-8
PWD=/Users/yamadanaoki
ITERM_PROFILE=Default
TERM=xterm
ITERM_SESSION_ID=w0t0p0
SHLVL=1
OLDPWD=/Users/yamadanaoki
_=/usr/bin/env 

パスが先ほど設定した順番になっていれば成功です。

Homebrew の環境変数を設定

本来であれば、先ほど/etc/pathsの設定ですでにHomebrewのパスが通っているハズなので、ここの手順は不要なのですが、brew -v とコマンドを実行してバージョン情報が表示されなければ実施します。

.zprofile に以下のコードを追記します。

export PATH=/usr/local/bin:$PATHexport
PATH=/usr/local/sbin:$PATH

これで zsh 上で　brew コマンドがまた使えるようになります。

参考サイト

• Homebrewを快適に使うために設定してる4つのこと | Macとかの雑記帳

Git をインストール

以下のコマンド一発で終了。割りと早く終わるはずです。

$ brew install git

初期設定

必要最低限の使い方しか知らない僕ですが、簡単な設定だけでも済ませておきます。まずはユーザー名と連絡先を登録します。

$ git config --global user.name "Your name"
$ git config --global user.email your-mail@yourdomain.com

次にカラーリングの設定です。Git は大量の文字列が画面を覆い尽くすので、適宜色分けしてくれないと読むのが疲れてしまいます。以下のコマンドを実行することで Git のメッセージをある程度適切に色分けしてくれるようになります。

$ git config --global color.ui "auto"

その他、Git の基本的な使い方や設定などに関しては、こちらが参考になります。（※いまでも良くお世話になってます。）

• Git入門 ｜ Developers.IO
• サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ

Github の複数アカウントに SSH 接続出来るようにする

個人用アカウントと会社用アカウントといったように、複数のアカウントに接続するための設定をしておきます。と、思ったら既に過去エントリーにまとめられていたので、これを見ながらすすめるとします。

• 【メモ】githubの複数アカウントにSSH接続するための設定手順 ｜ Developers.IO

git-flow を使えるようにする

参考サイト

• 見えないチカラ: A successful Git branching model を翻訳しました
• git-flow cheatsheet

現在自分が参加している開発案件がこの git-flow に則った運用を行っているため、コレを補助するためのプラグインをインストールしておくとします。git-flow の運用モデルについては、上記のエントリーが非常に判りやすくまとまっています。

Windows 環境だった頃は SourceTree という GUI ツールを使って運用してました。グラフィカル且つ高機能で初心者でもそれなりに使いやすいのですが、とにかく動作が重いのが難点だったので、今回からプラグインを入れてコマンドベースでやっていくとします。プラグインは以下のコマンドを実行することでインストール出来ます。

$brew install git-flow

Apache をインストール

参考サイト

• homebrewでapacheをインストールした時に少しはまった事 - Fevnirのブログ

Apache は他のパッケージと違って外部 formula ^*4 というモノに該当しているため、そのままではインストール出来ません。Apache をインストールする前に以下のコマンドを実行して外部 formula をインストール可能な状態にします。

$ brew tap homebrew/dupes

もう一つ。インストールできてもビルドで落ちる可能性があるので、以下のパッケージもインストールしておきます。

$ brew install openssl

これで前準備が出来ました。改めて以下のコマンドを実行して Apache のインストールに洒落込みます。

$brew install httpd

今回インストールした Apache のバージョンは2.2.25です。そして Mac OS X Mountain Lion に標準でインストールされている Apache のバージョンは2.2.22な訳ですが、コマンドからバージョンを確認してみると、

$ apachectl -v
Server version: Apache/2.2.22 (Unix)

と、Mac 標準の方が読み込まれてしまっており、せっかくインストールしたのに認識されていません。ということで PATH を設定しなおして、Homebrew でインストールした Apache が読み込まれるようにします。

PATH の設定

.zprofile に以下を追記します。

export PATH=/usr/local/bin:$PATH
export PATH=/usr/local/sbin:$PATH

Homebrew 版 zsh をインストールした際の設定で既に記述されている場合は、あえてもう一度書く必要はありません。というか既に PATH が通っていて、Homebrew 版 Apache が認識されているはずです。

そしてインストールした Apache の設定ファイル郡は/usr/local/etc/pache2にあります。あとは必要に応じてドキュメントルートやバーチャルホストの設定等を行えばよいでしょう。

MySQL をインストール

以下のコマンドを実行してインストールします。

$ brew install mysql

インストールが成功したら次にデータベースとユーザーの設定をするわけですが、基本的にはインストール成功時にそのための手順が表示されているハズなので、順番にコマンドを入力していけば問題なく出来るでしょう。もし手順のメッセージを消してしまっても、$ brew info mysql と実行すればいつでも見ることができます。

データベースとユーザーの設定

最初にデータベースのインストールとデータを保存する場所を設定します。以下のコマンドをそれぞれ実行します。

$ unset TMPDIR

$ mysql_install_db --verbose --user=`whoami` --basedir="$(brew --prefix mysql)" --datadir=/usr/local/var/mysql --tmpdir=/tmp

しばらく待っていると処理成功の結果が返ってきます。次にユーザーとパスワードの設定をするようにとのメッセージが表示されるので、必要に応じてこれを行います。

パスワードの設定

開発上の都合から、僕はrootユーザーのパスワードをあえて設定しないことにしてますが、一応手順だけメモっておきます。

まず最初に以下のコマンドを実行してMySQLを起動します。

$ mysql.server start

起動できたらパスワードの設定をします。

$ mysqladmin -u root password 'new-password'

その他、自動起動などの設定などは以下のサイトに詳しくまとまっているので、こちらを参考にするのが良いかと思います。

• HomebrewでMySQLをインストールする時に知っておきたいこと | Macとかの雑記帳

Ruby 環境を作る

Rubyに関しては、rbenvで Ruby のバージョンを切り替え、ruby-build経由で Ruby をインストールするといった構成にします。

rbenv をインストール

インストール方法は Github から Clone することになります。まずはホームディレクトリに移動。

$ cd ~/

続けて以下のコマンドを実行します。

$ git clone git://github.com/sstephenson/rbenv.git .rbenv

Clone 処理が終わったらインストールは成功です。rbenv コマンドが使えるように PATH の設定をします。.zprofileと.zshrcファイルを開いてそれぞれに以下のコードを追記します。

.zprofile

#rbenv
export PATH=$HOME/.rbenv/bin:$PATH

zshrc ファイルが存在しなければ新規作成すれば OK

# rbenv
eval "$(rbenv init -)"

入力して保存したら、ターミナル（シェル）を再起動して、以下のコマンドを実行します。

$ exec $SHELL

これで rbenv コマンドが使えるようになりました。試しに以下のコマンドを実行してバージョンが表示されるかどうか確認してみます。

$ rbenv -v
rbenv 0.4.0-54-gbdcc2e1

こんな感じでバージョン情報が表示されれば成功です。

ruby-build をインストール

これも Github から Clone してインストールします。まず.rbenvディレクトリ内にプラグイン用のディレクトリを作成して、そこに Clone すれば終了です。以下のコマンド3つを順に実行します。

$ mkdir -p ~/.rbenv/plugins
$ cd ~/.rbenv/pluginscd 
$ git clone git://github.com/sstephenson/ruby-build.git

readline をインストール

インストール必須のモノではありませんが、irbというコンソール上でRubyのコード処理を試す機能を使う際、日本語文字列を使うとなるとコレが必要になります。

$ brew install readline

特筆することはありません。これでインストールは完了です。

Ruby をインストール

でもってようやく Ruby のインストールです。まずはインストール可能な Ruby の一覧を出力して、どれをインストールするか決めるとします。

$ rbenv install --list Available versions:
  1.8.6-p383
  1.8.6-p420
  1.8.7-p249
・・・
  2.0.0-dev
  2.0.0-p0
  2.0.0-p195
  2.0.0-p247
  2.0.0-preview1
  2.0.0-preview2
  2.0.0-rc1
  2.0.0-rc2
  2.1.0-dev
・・・

とまぁ、結構な数が出てくるわけですが、今回は2013年9月時点で Ruby の最新版である2.0.0-p247をインストールします。以下のコマンドを実行します。

$ rbenv install 2.0.0-p247

結構時間かかりますが、しばらく待っているとインストールが終了します。最後にインストールした最新版をMac全体で使えるように設定します。

$ rbenv global 2.0.0-p247

これで Ruby のバージョンが 2.0 に切り替わりました。以下のコマンドを実行して反映されているか確認してみます。

ruby -v
ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-darwin12.4.0]

大丈夫そうです。

おわりに

Mac で Web 開発をするようになって、ターミナルといった黒い画面を使う頻度が格段に上がってしまいました。美しいビジュアルデザインとユーザーフレンドリーな操作感を備えた GUI がウリの Mac で、こんなに CUI を使うことになるとは、なんとも皮肉な感じがします。

一応僕はフロントエンドエンジニアとしてクラスメソッドに所属していますが、同じくらい Web アプリの UI やビジュアルのデザインをします。静的な絵を描くだけの名ばかり Web デザイナーではありません。Web アプリのデザインをするには動きまでデザインする必要があります。動きを把握するには、小規模でもサーバーサイドを絡めた Web アプリを自作出来るくらいのスキルは欲しいところです。正直言って環境構築は苦手ですが、こうしてコツコツと地味に溜め込んだ知識で少しでも僕と同じように困っている人の助けになることが出来れば幸いだったりします。

脚注